<template>

  <div style="margin-top: 20px;margin-left: 10px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>航班审核管理</b></el-breadcrumb-item>
        <el-breadcrumb-item>航班变更审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  <div class="flight-audit-container" style="margin-top: 51px">
    <el-card class="audit-card">
      <el-table :data="tableAudit" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="ffid" label="航班号" width="170"></el-table-column>
        <el-table-column prop="odate" label="原定日期" width="170"></el-table-column>
        <el-table-column prop="reason" label="变更原因" width="100"></el-table-column>
        <el-table-column prop="cdate" label="变更日期" width="170"></el-table-column>
        <el-table-column prop="detail" label="变更详情" ></el-table-column>
        <el-table-column prop="auditcnn" label="状态" width="120" align="center">
          <template  #default="scope">
            <span v-if="scope.row.auditcnn === '未审核' " style="color: #666666;font-size: 15px">
              <el-button type="info" style="width: 90px" round>未审核</el-button>
            </span>
            <span v-if="scope.row.auditcnn === '已通过' " style="color: #42b983;font-size: 15px">
              <el-button type="success" style="width: 90px" round>已通过</el-button>
            </span>
            <span v-if="scope.row.auditcnn === '已驳回' " style="color: red;font-size: 15px">
              <el-button type="danger" style="width: 90px" round>已驳回</el-button>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <!-- 通过按钮的工具提示 -->
            <el-tooltip content="通过审核" placement="top" effect="dark" transition="el-opacity">
              <el-button type="success" size="default" @click="approveFlight(scope.$index,scope.row)"><el-icon><CircleCheckFilled /></el-icon>通过</el-button>
            </el-tooltip>
            <!-- 驳回按钮的工具提示 -->
            <el-tooltip content="驳回审核" placement="top" effect="dark" transition="el-opacity">
              <el-button type="danger" size="default" @click="rejectFlight(scope.$index,scope.row)"><el-icon><CircleCloseFilled /></el-icon>驳回</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页按钮 -->
      <div class="demo-pagination-block">
        <el-pagination
            style="justify-content: left"
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total=pageFormModel.total
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
  </div>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue"
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {CircleCheckFilled, CircleCloseFilled} from "@element-plus/icons-vue";


// 从SessionStorage取出数据
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

//访问界面初始化时获取审核信息
onMounted(()=>{
  auditData()
})
const auditData = () =>{
  //alert(token)
  request({
    url : '/aduit/flightaduit/selectauditpage',
    method : 'get',
    params : searchFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    tableAudit.value = res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages

  })
}

///////// 表格 //////////////////
//表格数据
const tableAudit = ref([])

const searchFormRef=ref()
//表单的数据模型
const searchFormModel =reactive({
  id : '',
  ffid : '',
  odate : '',
  reason : '',
  cdate : '',
  detail : '',
  audit : '',
  auditcnn : '',
})

//分页--------------------------------------------------
const currentPage4 = ref()
const pageSize4 = ref()
// const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  pageSubFormModel.size=val
  //alert(`${pageSubFormModel.size} 每页条目数`)
  requestPage()
}
const handleCurrentChange = (val) => {
  pageSubFormModel.current=val
  //alert(`当前页: ${pageSubFormModel.current}`)
  requestPage()

}

const requestPage = () =>{
  request({
    url : '/aduit/flightaduit/selectauditpage',
    method : 'get',
    params : pageSubFormModel,
    headers: {
      'token': token
    }
  }).then(res=>{
    tableAudit.value = res.data.records
    pageFormModel.total = res.data.total
    pageFormModel.size = res.data.size
    pageFormModel.current = res.data.current
    pageFormModel.pages = res.data.pages

  })
}

//分页的数据模型
const pageFormModel =reactive({
  total : '',
  size : '',
  current : '',
  pages : ''
})

//分页的提交数据模型
const pageSubFormModel =reactive({
  size : '',
  currentPage : '',
})

// 表格的动作---------------------------------
//通过
const approveFlight = (rowIndex , rowData) =>{
  //测试
  // alert(rowData.id)
  // alert(token)
  ElMessageBox.confirm(
      '确认通过  ' +rowData.ffid +"航班变更吗",
      '谨慎操作',
      {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击通过按钮
    request({
      method : 'put',
      url : '/aduit/flightaduit/auditpass',
      data : {
        "id" : rowData.id
      },
      headers: {
        'token': token,
        'content-type' : "application/json;charset=UTF-8"
      }
    }).then(res=>{
      if (200 == res.data.errorCode){
        ElMessage({
          type: 'success',
          message: '已通过',
        })
        // 请求后刷新表格
        requestPage()
      }
    })
  }).catch(() => {//点击取消按钮，进行退出
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}

//驳回
const rejectFlight = (rowIndex , rowData) =>{
  //测试
  // alert(rowData.id)
  // alert(token)
  ElMessageBox.confirm(
      '确认驳回  ' +rowData.ffid +"航班变更吗",
      '谨慎操作',
      {
        confirmButtonText: '驳回',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {//点击通过按钮
    request({
      method : 'put',
      url : '/aduit/flightaduit/auditreview',
      data : {
        "id" : rowData.id
      },
      headers: {
        'token': token,
        'content-type' : "application/json;charset=UTF-8"
      }
    }).then(res=>{
      if (200 == res.data.errorCode){
        ElMessage({
          type: 'success',
          message: '已驳回',
        })
        // 请求后刷新表格
        requestPage()
      }
    })
  }).catch(() => {//点击取消按钮，进行退出
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })
}

</script>


<style scoped>
/* 航班变更审核标题的样式 */
.audit-title {
  font-size: 24px; /* 标题字体大小 */
  color: #333; /* 标题字体颜色 */
  text-align: center; /* 标题居中对齐 */
  margin-bottom: 20px; /* 标题与下方内容的间距 */
  font-weight: bold; /* 加粗字体 */
  padding: 10px 0; /* 上下内边距 */
  border-bottom: 2px solid #3498db; /* 下边框 */
}

</style>


